<template>
  <div class="my-message">
    <page-list-layout>
      <template v-slot:one>
        <home-nav :title="route.matched[3].meta.title" :more="false" />
        <router-view/>
      </template>
      <template v-slot:top>
        <ul>
          <li class="h-40 text-2xl text-center yu-bgColor flex flex-col justify-center">我的消息</li>
          <li
              v-for="(item, index) in route.matched[2].children"
              :key="item.path"
              v-show="!item.meta.hidden"
              @click="jumpPath(item.path)"
              class="yu-bgColor-two-hover"
              :class="[route.matched[3].name === item.name ? 'yu-bgColor-two-active-only yu-textColor-active' : null, 'relative']"
          >

            <van-icon :name="item.meta.icon"  />
            <span class=" inline-block  p-2">{{item.meta.title}}</span>
            <msg-count v-if="index === 1"/>
          </li>
        </ul>
      </template>
    </page-list-layout>
  </div>
</template>

<script setup>
import PageListLayout from '@/components/PageListLayout/index.vue'
import HomeNav from '@/components/HomeNav/index.vue'
import MsgCount from '@/components/MsgCount/index.vue'
import {useRoute, useRouter} from "vue-router";
const route = useRoute()
const router = useRouter()

const jumpPath = (path) => {
  router.push({
    path
  })
}
</script>

<style lang="scss" scoped>

</style>
